<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳动的心</title>
    <style>
        * {
            margin: 0;  /* 重置默认边距 */
            padding: 0;     /* 重置默认内边距 */
        }
        html, body {
            height: 100%;  /* 使html和body填满整个视口高度 */ 
        }
        body {
           background-image: url("1.jpg") ;  /* 设置背景颜色 */
           display: flex;   /* 使元素成为弹性容器 */
           flex-direction: row; /* 水平方向排列 */
           align-items: center; /* 垂直居中对齐 */
           justify-content: center; /* 水平居中对齐 */

        }
        .heart {
            width: 200px; /* 设置心的宽度 */
            height: 200px; /* 设置心的高度 */
            background-color: red; /* 设置心的背景颜色 */ 
            position: relative; /* 相对定位 */
            transform:rotate(45deg)/* 旋转45度 */;
            animation: beat 1.5s infinite alternate; /* 应用动画效果 */
            box-shadow: 0 0 30px red; /* 添加红色阴影 */
        }
        .heart::before {
            content: ""; /* 伪元素内容为空 */
            position: absolute; /* 绝对定位 */
            width: 200px; /* 设置伪元素的宽度 */ 
            height: 100px; /* 设置伪元素的高度 */
            background-color: red; /* 设置伪元素的背景颜色 */
            position: absolute; /* 绝对定位 */
            left: 0px; /* 相对于父元素的左侧偏移 */
            top: -99px; /* 相对于父元素的顶部偏移 */
            border-radius: 100px 100px 0 0; /* 设置圆角 */
            box-shadow: 0 0 30px red; /* 添加红色阴影 */
        }
       .heart::after {
            content: ""; /* 伪元素内容为空 */
            width: 100px; /* 设置伪元素的宽度 */ 
            height: 200px; /* 设置伪元素的高度 */
            position: absolute; /* 绝对定位 */
            background-color: red; /* 设置伪元素的背景颜色 */
            left: -99px;    /* 相对于父元素的左侧偏移 */
            top: 0; /* 相对于父元素的顶部偏移 */;
            border-radius: 100px 0 0 100px; /* 设置圆角 */
            box-shadow: 0 0 30px red; /* 添加红色阴影 */
       }
       p{
            font-size: 50px; /* 设置字体大小 */
            color: rgb(255, 0, 0); /* 设置字体颜色 */
            margin-top: 500px; /* 设置上边距 */
            position: absolute; /* 绝对定位 */   
       }
       @keyframes beat {/* 定义一个名为 beat 的动画 */
            0% { /* 动画开始时 */
                transform: rotate(45deg) scale(0.6); /* 初始大小 */
            }
            100% { /* 动画中间时 */
                transform: rotate(45deg) scale(1.4); /* 放大到1.2倍 */
            }
        }
    </style> 
</head>
<body>
    <div class="heart"></div>
    <p>在网页上制作的第一个心</p>
</body>
</html>